<template>
 <div>
   <h2>我是用户界面</h2>
   <p>我是用户的相关信息，嘿嘿嘿</p>
   <h2>{{userId}}</h2>
   <h2>{{$route.params.id}}</h2>
   <button @click="btnClick">按钮</button>
 </div>
</template>

<script>
export default {
  name: "User",
  computed: {
    userId() {
      return this.$route.params.id
    }
  },
  created() {
    console.log('User created')
  },
  destroyed() {
    console.log('User destroyed')
  },
  methods: {
    btnClick() {
      // 所有的组件都继承自Vue类的原型
      // $router是全局的VueRouter实例，想要导航到不同URL，则使用$router.push方法
      console.log(this.$router);
      // $route是当前router跳转对象（就是routes数组中的一个元素），里面可以获取name,path,query,params等
      console.log(this.$route);

      console.log(this.name);
    }
  }
}
</script>

<style scoped>

</style>
